<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ttblsjxt'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="attribute" method="${_method }" class="layui-form" id="form">
            <input type="hidden" name="_method" value="${_method }"/>
            <form:hidden path="id"/>
            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='ggmc'/></label>
                <div class="layui-input-block">
                    <form:input path="name" class="layui-input" placeholder="<fmt:message key='ggmc'/>" style="width: 300px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='bz'/></label>
                <div class="layui-input-block">
                    <form:input path="note" class="layui-input" placeholder="<fmt:message key='bz'/>" style="width: 300px;"/>
                </div>
            </div>

            <div class="layui-form-item" style="margin-bottom: 10px;" id="params">
                <form:hidden path="attributeData" id="params-hidden"/>
                <label class="layui-form-label"><fmt:message key='gg'/></label>
                <a href="javascript:void(0);" class="layui-btn layui-btn-mini" style="float: left;" id="addParams"><i class="layui-icon">&#xe654;</i></a>
                <br><br><br>

                <c:forEach items="${attribute.attributes}" var="item">
                    <div class='layui-block' style='margin-left: 60px; margin-bottom: 10px; line-height:  36px;' id='params-${item.id}'>
                        <label class='layui-form-label'><fmt:message key='ggz'/>:</label>
                        <input type='text' name='' value="${item.name}" autocomplete='off' class='layui-input paramsKey' data-id='${item.id}' data='${item.id}' style='width: 300px; display: inline-block; float: left;'>
                        <a href='javascript:void(0);' class='layui-btn layui-btn-mini layui-btn-danger subject-params' data-id="${item.id}" data='params-${item.id}' style='margin-left: 10px;'><i class='layui-icon'>&#xe640;</i></a>
                    </div>
                </c:forEach>

            </div>

            <div class="layui-input-block">
                <div style="display: none"><input type="button" value="保存" class="layui-btn" id="submit" lay-filter="submit" lay-submit></div>
            </div>

        </form:form>
    </div>
</div>
<script>
    $(function () {

        $("#addParams").click(function () {
            var id = Math.floor(Math.random() * 10000);
            $("#params").append("<div class='layui-block' style='margin-left: 60px; margin-bottom: 10px; line-height:  36px;' id='params-" + id + "'><label class='layui-form-label'><fmt:message key='ggz'/>:</label><input type='text' name='' autocomplete='off' class='layui-input paramsKey' data-id='0' data='" + id + "' style='width: 300px; display: inline-block; float: left;'><a href='javascript:void(0);'  class='layui-btn layui-btn-mini layui-btn-danger subject-params' data-id='0' data='params-" + id + "' style='margin-left: 10px;'><i class='layui-icon'>&#xe640;</i></a></div>");
        });

        $(document).on("click", ".subject-params", function () {
            var removeId = $(this).attr("data");
            var id = $(this).attr("data-id");

            if (id == 0) {
                $("#" + removeId).remove();
            } else {
                $.ajax({
                    url: "${web_domain}/mall/goods/attribute/" + id + "/remove",
                    type: "post",
                    dataType: "json",
                    data: {
                        "id": id,
                        "_method": "delete"
                    },
                    success: function (result) {
                        if (result.status) {
                            $("#" + removeId).remove();
                        } else {
                            layer.msg(result.message);
                        }
                    }
                });
            }

        });

        layui.use(['form', 'laydate'], function () {

            var form = layui.form;
            var laydate = layui.laydate;

            form.on('submit(submit)', function (data) {

                var result = [];
                $(".paramsKey").each(function (index, item) {
                    var id = $(this).attr("data-id");
                    var key = $(item).val();

                    result.push(id + ":" + key);
                });

                $("#params-hidden").attr("value", result.join(";"));

                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();
                        } else {
                            layui.use('layer', function () {
                                layer.msg(result.message);
                            });
                        }
                    }
                });
            });

        });

    });
</script>
</body>
</fmt:bundle>
</html>